<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <title>学生考勤</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/element.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/base.css}">
</head>
<style>
    .up-file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
    }
    .el-message--error{
        word-break: break-word;
        word-wrap: break-word;
        white-space: -moz-pre-wrap;
        white-space: -hp-pre-wrap;
        white-space: -o-pre-wrap;
        white-space: -pre-wrap;
        white-space: pre;
        white-space: pre-wrap;
        white-space: pre-line;
    }
    html, body, #wrapper{
        height: 100%;
    }
     /* 考勤状态按钮 */
   .btn-u{
       display: inline-block;
       margin-left: 20px;
       font-weight: bold;
   }
    .footer-info{
        line-height: 55px;
        margin-left: 6%;
        font-weight: bolder;
        font-size: 16px;
    }
    .course-info{
        line-height: 55px;
        margin-left: 2%;
        font-weight: bolder;
        font-size: 16px;
    }
    .el-textarea__inner{
        overflow-y: hidden;
    }
</style>
<body>

<div id="wrapper" v-cloak>
    <el-container style="height: 100%;">
        <el-header style="height: 7%;">
            <div style="margin-top: 5px; margin-left: 10px">
                <span style="font-weight: bold">上课班级：</span>
                <el-select v-model="selectedClasses"  size="small" placeholder="请选择上课班级" @change="classesChange">
                    <el-option v-for="item in classes" :key="item.id" :label="item.cname" :value="item.id">
                    </el-option>
                </el-select>
                <!--<el-button size="mini" type="primary">快速考勤</el-button>-->
                <el-button style="margin-left: 10px;" size="small" type="primary" @click="toQrCode">扫码考勤</el-button>
                <el-button size="small" type="primary" @click="queryStudents()">名单考勤</el-button>
                <el-button @click="openConfirm" :disabled="flag" size="small" type="success ">提交考勤</el-button>

                <div style="float: right;width: 30%;" v-if="searchStudent">
                    <span class="footer-info" style="color: #19BE6B">已到:{{arrivecount}}</span>
                    <span class="footer-info" style="color: #FE315D">旷课:{{allTruancy}}</span>
                    <span class="footer-info" style="color: #4786FF">请假:{{allLeave}}</span>
                    <span class="footer-info" style="color: #FFA647">迟到:{{allLate}}</span>
                    <span class="footer-info" style="color: #C4C4C3">早退:{{allEarly}}</span>
                </div>

                <div style="float: right; width: 30%;" v-if="searchStudent">
                    <span class="course-info">教室: {{students[0].classroom}}</span>
                    <span class="course-info">课程: {{students[0].coursename}}</span>
                    <span class="course-info">节次: {{students[0].classtime}}</span>
                </div>
                <div style="margin-top: -10px;">
                    <el-divider></el-divider>
                </div>
            </div>
        </el-header>
        <el-main style="height: 93%;">
            <el-table :data="students" v-loading="loading" border size="small"  style="width: 100%;">
                <el-table-column width="90" prop="id" label="序号"></el-table-column>
                <el-table-column prop="stuid" label="学号"></el-table-column>
                <el-table-column prop="sname" label="姓名"></el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status==1 " style="color: #19BE6B;font-weight: bolder">已到</span>
                        <span v-if="scope.row.status == 2" style="color: #4786FF;font-weight: bolder">请假</span>
                        <span v-if="scope.row.status == 3" style="color: #FFA647;font-weight: bolder">迟到</span>
                        <span v-if="scope.row.status == 4" style="color: #C4C4C3;font-weight: bolder">早退</span>
                        <span v-if="scope.row.status == 5" style="color: #FE315D;font-weight: bolder">旷课</span>
                        <el-button style="margin-left: 30px" v-if="scope.row.leaveId && scope.row.status == 2" size="mini" type="primary" @click="showLeaveInfo(scope.row)">请假信息</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="500">
                    <template slot-scope="scope">
                        <el-button @click="modifyStatus(scope.$index, scope.row, 1)" size="mini" class="btn-u" plain="true"
                                   style="color: #19BE6B;border: 2px solid #19BE6B;">已到</el-button>
                        <el-button @click="modifyStatus(scope.$index, scope.row, 5)" size="mini" class="btn-u" plain="true"
                                   style="color: #FE315D;border: 2px solid #FE315D;">旷课</el-button>
                        <el-button @click="modifyStatus(scope.$index, scope.row, 2)" size="mini" class="btn-u" plain="true"
                                   style="color: #4786FF;border: 2px solid #4786FF;">请假</el-button>
                        <el-button @click="modifyStatus(scope.$index, scope.row, 3)" size="mini" class="btn-u" plain="true"
                                   style="color: #FFA647;border: 2px solid #FFA647;">迟到</el-button>
                        <el-button @click="modifyStatus(scope.$index, scope.row, 4)" size="mini" class="btn-u" plain="true"
                                   style="color: #C4C4C3;border: 2px solid #C4C4C3;">早退</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="请假信息" :visible.sync="showLeave" width="40%">
                <div>
                    <div style="display: inline-block">
                        <div style="margin-top: 10px">
                            <span style="font-weight: bolder">请假时间:</span>
                        </div>
                        <div style="margin-top: 10px">
                            <span style="font-weight: bold">{{leaveInfo.time}}</span>
                        </div>
                        <div style="margin-top: 10px">
                            <span style="font-weight: bolder">请假原因:</span>
                        </div>
                        <div style="margin-top: 10px">
                            <el-input
                                    type="textarea"
                                    :rows="6"
                                    max="200"
                                    placeholder="请假原因"
                                    readonly
                                    v-model="leaveInfo.reason"
                                    style="overflow-y:hidden"
                                    autosize="true"
                                    resize="none">
                            </el-input>
                        </div>
                    </div>
                    <div class="demo-image" style="display: inline-block;margin-left: 20px">
                            <el-image
                                    style="width: 200px; height: 200px"
                                    :preview-src-list="srcList"
                                    :src="srcList[0]"
                                    fit="fill">
                                <div
                                        slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showLeave = false">取 消</el-button>
                    <el-button type="primary" @click="showLeave = false">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog title="考勤提交" :visible.sync="confirmDialog" width="35%">
                <div>
                    <span class="footer-info" style="color: #19BE6B">已到:{{arrivecount}}</span>
                    <span class="footer-info" style="color: #FE315D">旷课:{{allTruancy}}</span>
                    <span class="footer-info" style="color: #4786FF">请假:{{allLeave}}</span>
                    <span class="footer-info" style="color: #FFA647">迟到:{{allLate}}</span>
                    <span class="footer-info" style="color: #C4C4C3">早退:{{allEarly}}</span>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="confirmDialog = false">取 消</el-button>
                    <el-button type="primary" @click="confirm()">确 定</el-button>
                </span>
            </el-dialog>

        </el-main>
    </el-container>



</div>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/vue.min.js}"></script>
<script type="text/javascript" th:src="@{/js/axios.js}"></script>
<script type="text/javascript" th:src="@{/js/element.js}"></script>
<script type="text/javascript" th:src="@{/js/tinymce/tinymce.min.js}"></script>
<script>
    let v = new Vue({
        el: "#wrapper",
        data:{
            students: [],
            loading: false,
            // 登录用户信息
            user: {},
            // 当前上课班级
            classes: [],
            classesInfo: [],
            // 当前查询的上课班级id
            selectedClasses: '',
            flag: false,
            arrivecount: 0,
            allLeave: 0,
            allLate: 0,
            allTruancy: 0,
            allEarly: 0,
            reClocking: [],
            searchStudent: false,
            // 展示请假信息
            showLeave: false,
            leaveInfo:{
                time: "",
                reason: "",
                imagepath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            },
            srcList: [
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            ],
            confirmDialog: false
        },
        created(){
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
            this.queryClasses();
        },
        methods:{
            // 查询是否有过考勤记录，有过考勤记录就不能扫码考勤
            queryAttId(){
                let param = new URLSearchParams();
                axios.get("../attendance/getAttId/" + this.user.username, {
                    params:{
                        classId: this.selectedClasses
                    }
                }).then(res=>{
                    this.attId = res.data.data
                })
            },
            // 跳转到二维码界面
            toQrCode(){
                if (this.attId != 0 && this.attId){
                    this.$message({type: "warning", message: "已扫过码，修改请到左侧考勤管理或学生考勤的考勤名单中修改", duration: 5000})
                    return;
                }
                if (this.classes.length <= 0){
                    this.$message({type: "warning", message: "暂无信息", duration: 2000})
                    return;
                }
                let uuid = this.uuid(32);
                let href = location.href;
                let prefix = href.substring(0, href.indexOf("/admin_back"));
                let url = prefix + "/admin_back/qrcode.html?id=" + uuid;
                window.open(url);
            },
            // 生成uuid的方法
            uuid(len, radix) {
                var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
                var uuid = [], i;
                radix = radix || chars.length;

                if (len) {
                    // Compact form
                    for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
                } else {
                    // rfc4122, version 4 form
                    var r;

                    // rfc4122 requires these characters
                    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                    uuid[14] = '4';

                    // Fill in random data.  At i==19 set the high bits of clock sequence as
                    // per rfc4122, sec. 4.1.5
                    for (i = 0; i < 36; i++) {
                        if (!uuid[i]) {
                            r = 0 | Math.random()*16;
                            uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                        }
                    }
                }

                return uuid.join('');
            },
            // 打开提交信息框
            openConfirm(){
                if (this.students.length <= 0){
                    this.$message({type: "warning", message: "暂无信息", duration: 2000})
                    return;
                }
                this.confirmDialog = true
            },
            // 展示请假信息
            showLeaveInfo(student){
                axios.get("../leave/get/" + student.leaveId).then(res=>{
                    this.leaveInfo = res.data.data;
                    this.leaveInfo.time =  this.leaveInfo.requestStart + " ~ " + this.leaveInfo.requestEnd;
                    this.srcList[0] = "../uploadfile/" + this.leaveInfo.imagepath.replaceAll(/\\/g, "/");
                })
                this.showLeave = true;
            },
            // 查询当前上课班级
            queryClasses(){
                axios.get("../classInfo/get/" + this.user.id).then(res=>{
                    this.classesInfo = res.data.data;
                    if(this.classesInfo != null && this.classesInfo.length > 0){
                        this.classesInfo.forEach(item=>{
                            let cls = {
                                cname : item.cname,
                                id : item.id
                            }
                            this.classes.push(cls)
                        })
                        this.selectedClasses = this.classes[0].id
                        this.queryAttId();
                    }else {
                        this.$message({type: "warning", message: "您当前暂无课程"})
                    }
                })
            },
            // 查询当前选中的班级的学生
            queryStudents(){
                if (this.classes.length <= 0){
                    this.$message({type: "warning", message: "暂无信息", duration: 2000})
                    return;
                }
                // 根据当前班级id查询出学生
                this.reClocking = [];
                this.arrivecount = 0;
                this.allLeave = 0;
                this.allLate = 0;
                this.allTruancy = 0;
                this.allEarly = 0;
                axios.get("../student/get/" + this.user.username ,{
                    params:{
                        cid : this.selectedClasses
                    }
                }).then(res=>{
                    if (!res.data.data){
                        return;
                    }
                    this.students = res.data.data.studentInfoList;
                    // 考勤attId == 0 默认当前学生已到 否则是重复考勤
                    this.attId = res.data.data.attId
                    if(this.students.length > 0){
                        if(this.attId == 0){
                            this.students.forEach(student=>{
                                student.status = 1
                                if(student.leaveId){
                                    student.status = 2
                                    this.allLeave ++;
                                }else {
                                    this.arrivecount ++;
                                }
                            })
                        }else{
                            // 从考勤记录表中查询
                            this.students.forEach(student=>{
                                if(student.status == 1){
                                    this.arrivecount ++;
                                }else if(student.status == 2){
                                    this.allLeave ++;
                                }else if(student.status == 3){
                                    this.allLate ++;
                                }else if(student.status == 4){
                                    this.allEarly ++;
                                }else if(student.status == 5){
                                    this.allTruancy ++;
                                }
                            })

                        }
                    }
                    this.searchStudent = true
                    if(this.students.length <= 0){
                        this.flag = true;
                        this.searchStudent = false;
                    }
                })

            },
            // 选中的班级改变
            classesChange(e){
                // 重置已到人数
                this.reClocking = [];
                this.arrivecount = 0;
                this.allLeave = 0;
                this.allLate = 0;
                this.allTruancy = 0;
                this.allEarly = 0;
                // 根据当前班级id查询出学生
                if (this.searchStudent){
                    this.queryStudents();
                }
            },
            // 修改学生考勤状态
            modifyStatus(index, student, status){
                // 修改footer的统计
                if(status == 1){
                    this.arrivecount ++;
                }else if(status == 2){
                    this.allLeave ++;
                }else if(status == 3){
                    this.allLate ++;
                }else if(status == 4){
                    this.allEarly ++;
                }else if(status == 5){
                    this.allTruancy ++;
                }
                if(student.status == 1){
                    this.arrivecount --;
                }else if(student.status == 2){
                    this.allLeave --;
                }else if(student.status == 3){
                    this.allLate --;
                }else if(student.status == 4){
                    this.allEarly --;
                }else if(student.status == 5){
                    this.allTruancy --;
                }
                student.status = status;
                let flag = true;
                this.reClocking.forEach(item=>{
                    if(item.stuid == student.stuid){
                        item.status = student.status;
                        flag = false;
                    }
                })
                if(flag){
                    this.reClocking.push(student);
                }
                this.$set(this.students, index, student)
                this.$forceUpdate()
            },
            // 提交考勤信息
            confirm(){
                if (this.reClocking.length <= 0){
                    this.$message({type: "warning", message: "暂无信息", duration: 2000})
                    return;
                }
                let param = new URLSearchParams();
                param.append("classId", this.selectedClasses);
                param.append("arrivecount", this.arrivecount);
                param.append("signmethod", 4);
                this.records = [];
                setTimeout(tmp=>{

                    // 如果attId == 0 就是新增 否则修改
                    if(this.attId == 0){
                        // 批量插入 考勤详情
                        axios.post("../attendance/add/" + this.user.username, param).then(res=>{
                            this.attId = res.data.data;
                            this.students.forEach(student => {
                                let record = {
                                    attid : this.attId,
                                    stuid : student.stuid,
                                    leaveid : student.leaveId,
                                    status : student.status
                                }
                                this.records.push(record);
                            })
                            axios({
                                url: "../records/add/" + this.user.username ,
                                method: 'post',
                                data: this.records,
                                header: {
                                    'Content-Type': 'application/json'
                                }
                            }).then(res=>{
                                if (res.data.code == 1){
                                    this.$message({type: "success", message: res.data.msg});
                                }else {
                                    this.$message({type: "error", message: res.data.msg});
                                }

                            })
                        })
                    }else {
                        // 修改考勤详细
                        axios.post("../attendance/add/" + this.user.username, param).then(res=>{
                            this.attId = res.data.data;
                            axios({
                                url: "../records/modify/" + this.user.username ,
                                method: 'put',
                                data: this.records,
                                header: {
                                    'Content-Type': 'application/json'
                                }
                            }).then(res=>{
                                if (res.data.code == 1){
                                    this.$message({type: "success", message: res.data.msg});
                                }else {
                                    this.$message({type: "error", message: res.data.msg});
                                }

                            })
                        })
                        this.reClocking.forEach(student => {
                            let record = {
                                id : student.id,
                                status : student.status
                            }
                            this.records.push(record);
                        })
                        this.reClocking = []
                    }
                    this.confirmDialog = false;
                }, 100)

            }
        }
    })
</script>
</body>
</html>